<template>
  <div>
    <Table
      ref="tableRef"
      :url="URL_QUERYLABELLIST"
      :columns="data.columns"
      :handles="data.handles"
      :toolbar="data.toolbar"
      :query="data.query"
      listKey="list"
    ></Table>
    <DialogLabelUser ref="dialogLabelUser"></DialogLabelUser>
    <DialogLabelStation ref="dialogLabelStation"></DialogLabelStation>
    <ImportDialog
      ref="importDialogRef"
      @user-data="userData"
      title="用户标签成员导入"
      label="上传成员"
      templateName="成员导入模板"
      :url="URL_UPLOADUSERS"
    ></ImportDialog>
  </div>
</template>

<script lang="ts" setup name="labelList">
import Table from '@/components/table/index.vue';
import DialogLabelUser from './dialogLabelUser.vue';
import DialogLabelStation from './dialogLabelStation.vue';
import ImportDialog from '@/components/qcDialog/importDialog.vue';
import {
  URL_QUERYLABELLIST,
  deleteLabel,
  URL_UPLOADUSERS,
} from '@/service/apis/market';
import { queryDicByParent } from '@/service/apis/api';
const router = useRouter();

const tableRef = ref();
const dialogLabelUser = ref();
const dialogLabelStation = ref();
const importDialogRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

queryDicByParent({
  listDtos: ['labelType', 'dataType', 'isVisible'],
}).then((res: any) => {
  data.columns[2].dic = res.labelType;
  data.columns[3].dic = res.dataType;
  data.columns[4].dic = res.isVisible;
  data.query[1].props.options = res.labelType;
  data.query[3].props.options = res.isVisible;
  data.query[4].props.options = res.dataType;
});

const data = reactive({
  columns: [
    {
      prop: 'channelName',
      label: '平台运营商',
    },
    {
      prop: 'labelName',
      label: '标签名称',
    },
    {
      prop: 'type',
      label: '标签类型',
      dic: [] as any,
    },
    {
      prop: 'dataType',
      label: '绑定数据类型',
      dic: [] as any,
    },
    {
      prop: 'isVisible',
      label: '移动端可见',
      dic: [] as any,
    },
    {
      prop: 'stationPriority',
      label: '优先级',
    },
    {
      prop: 'labelMember',
      label: '标签成员',
      dataType: String,
    },
    {
      prop: 'updateBy',
      label: '修改人',
    },
    {
      prop: 'updateTime',
      label: '修改时间',
    },
  ],
  handles: [
    {
      label: '标签成员',
      disabledFun: (row: any) => {
        return row.ground;
      },
      handle: (row: any) => {
        if (row.dataType === '0') {
          dialogLabelUser.value.show(row);
        } else if (row.dataType === '1') {
          dialogLabelStation.value.show(row);
        }
      },
    },
    {
      label: '修改',
      permission: 'labelList.edit',
      disabledFun: (row: any) => {
        return (
          window.localStorage.getItem('orgType') === '2' ||
          window.localStorage.getItem('orgType') === '3'
        );
      },
      handle: (row: any) => {
        router.push({
          name: 'labelEdit',
          query: { id: row.id },
        });
      },
    },
    {
      label: '删除',
      permission: 'labelList.delete',
      color: '#FA3939',
      handle: (row: any) => {
        ElMessageBox.confirm('此操作将永久删除该数据，是否继续？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteLabel({
            id: row.id,
          }).then((res: any) => {
            tableRef.value.getData();
          });
        });
      },
    },
    {
      label: '用户导入',
      permission: 'labelList.import',
      hideFun: (row: any) => {
        return row.dataType === '1';
      },
      handle: (row: any) => {
        importDialogRef.value?.show({
          labelId: row.id,
        });
      },
    },
  ],
  toolbar: [
    {
      label: '新增',
      permission: 'labelList.add',
      disabledFun: (row: any) => {
        return (
          window.localStorage.getItem('orgType') === '2' ||
          window.localStorage.getItem('orgType') === '3'
        );
      },
      icon: 'icon-add',
      type: 'primary',
      handle: (row: any) => {
        router.push({
          name: 'labelAdd',
        });
      },
    },
  ],
  query: [
    {
      label: '标签名称',
      prop: 'labelName',
      comName: 'input',
      props: {
        placeholder: '请输入标签名称',
      },
    },
    {
      label: '标签类型',
      prop: 'type',
      comName: 'select',
      props: {
        placeholder: '请选择标签类型',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '修改时间',
      prop: 'time',
      comName: 'date',
      keys: ['startTime', 'endTime'],
      props: {
        type: 'daterange',
      },
    },
    {
      label: '移动端可见',
      prop: 'isVisible',
      comName: 'select',
      props: {
        placeholder: '请选择移动端可见',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '绑定数据类型',
      prop: 'dataType',
      comName: 'select',
      props: {
        placeholder: '请选择绑定数据类型',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
  ],
});

const userData = (data: any) => {
  tableRef.value.getData();
};
</script>